<div class="shortcuts">
    <mat-toolbar>
        <div class="container">
            <h2 mat-dialog-title>{{ "PAGES.SHORTCUTS.TITLE" | translate }}</h2>
            <button class="close-button"
                    color="primary" mat-icon-button routerLink="/app">
                <mat-icon>close</mat-icon>
            </button>
        </div>
    </mat-toolbar>

    <div class="content container">
        <mat-list>
            <mat-list-item *ngFor="let shortcut of shortcuts.slice(0, (shortcuts.length / 2))">
            <span *ngFor="let key of shortcut.keys; let last = last">
                <span class="key">{{ key }}</span><span *ngIf="!last">&nbsp;+&nbsp;</span>
            </span>
                <span class="description">
                {{ shortcut.description | translate }}
            </span>
            </mat-list-item>
        </mat-list>
        <mat-list>
            <mat-list-item *ngFor="let shortcut of shortcuts.slice(shortcuts.length / 2)">
            <span *ngFor="let key of shortcut.keys; let last = last">
                <span class="key">{{ key }}</span><span *ngIf="!last">&nbsp;+&nbsp;</span>
            </span>
                <span class="description">
                {{ shortcut.description | translate }}
            </span>
            </mat-list-item>
        </mat-list>
    </div>
</div>
